//反向继承
//一般来说 子类继承父类, 都是先调父类的 再调子类的
//而反向继承的意思是 先执行儿子 再执行父类的
//
//作用是扩展老元素
//emmmm

// import React from 'react';
import React from './ireact/react';
// import ReactDOM from 'react-dom';
import ReactDOM from './ireact/react-dom';

class Button extends React.Component {
  state = {name:'ahhh'}
  componentWillMount() {
    console.log('Button componentWillMount');
  }
  componentDidMount() {
    console.log('Button componentDidMount');
  }
  render() {
    console.log('Button render');
    return <button name={this.state.name} title={this.props.title}>+</button>
  }
}


const wrap = OldComponent=>{
  return class NewComponent extends OldComponent {
    state = {number:0}
    componentWillMount(){
      console.log('Button componentWillMount');
      super.componentWillMount();
    }
    componentDidMount(){
      console.log('Button componentDidMount');
      super.componentDidMount();
    }
    add = ()=>{
      this.setState({number: this.state.number + 1});
    }
    render() {
      console.log('NewComponent render');
      const superRenderElement = super.render()
      const renderElement = React.cloneElement(superRenderElement,/*→要混入的新属性*/{
        onClick:this.add
      },/*→ 要传入的孩子*/this.state.number)
      return renderElement;
    }
  }
}

const WrapButton = wrap(Button);
ReactDOM.render(<WrapButton />, document.getElementById('root'));
